<template>
    <div class="mod-user">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.userName" placeholder="用户名" clearable size="small"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()" size="small">查询</el-button>
                <el-button size="small" v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增
                </el-button>
                <el-button size="small" v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()"
                           :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
                  style="width: 100%;" size="small">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
            </el-table-column>
            <el-table-column prop="userName" header-align="center" align="center" label="用户名">
            </el-table-column>
            <el-table-column prop="email" header-align="center" align="center" label="邮箱">
            </el-table-column>
            <!--<el-table-column prop="mobile" header-align="center" align="center" label="手机号">
            </el-table-column>-->
            <el-table-column prop="status" header-align="center" align="center" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
                    <el-tag v-else size="small">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"
                             :formatter="handleTime">
            </el-table-column>
            <el-table-column  header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button v-if="isAuth('sys:user:update')" type="text" size="small"
                               @click="addOrUpdateHandle(scope.row.id)">修改
                    </el-button>
                    <el-button v-if="isAuth('sys:user:delete')" type="text" size="small"
                               @click="deleteHandle(scope.row.id)">删除
                    </el-button>
                    <el-button v-if="isAuth('sys:user:update')" type="text" size="small"
                               @click="updatePass(scope.row.id)">修改密码
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                       :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
    import AddOrUpdate from './qianuser-add-or-update'

    export default {
        data () {
            return {
                dataForm : {
                    userName : ''
                } ,
                dataList : [] ,
                pageIndex : 1 ,
                pageSize : 10 ,
                totalCount : 0 ,
                dataListLoading : false ,
                dataListSelections : [] ,
                addOrUpdateVisible : false
            }
        } ,
        components : {
            AddOrUpdate
        } ,
        activated () {
            this.getDataList ()
        } ,
        methods : {
            // 获取数据列表
            getDataList () {
                this.dataListLoading = true
                this.$http ( {
                    url : this.$http.adornUrl ( '/qian/user/list' ) ,
                    method : 'get' ,
                    params : this.$http.adornParams ( {
                        'page' : this.pageIndex ,
                        'limit' : this.pageSize ,
                        'username' : this.dataForm.userName
                    } )
                } ).then ( ( { data } ) => {
                    if ( data && data.code === 200 ) {
                        this.dataList = data.page.list
                        this.totalCount = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalCount = 0
                    }
                    this.dataListLoading = false
                } )
            } ,
            // 每页数
            sizeChangeHandle ( val ) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList ()
            } ,
            // 当前页
            currentChangeHandle ( val ) {
                this.pageIndex = val
                this.getDataList ()
            } ,
            // 多选
            selectionChangeHandle ( val ) {
                this.dataListSelections = val
            } ,
            // 新增 / 修改
            addOrUpdateHandle ( id ) {
                this.addOrUpdateVisible = true
                this.$nextTick ( () => {
                    this.$refs.addOrUpdate.init ( id )
                } )
            } ,
            handleTime ( rowData ) {
                return rowData.createTime.slice(0,10)
            } ,
            // 新增 / 修改
            updatePass ( id ) {
                this.addOrUpdateVisible = true
                this.$nextTick ( () => {
                    this.$refs.addOrUpdate.updatePass ( id )
                } )
            } ,
            // 删除
            deleteHandle ( id ) {
                var userIds = id?[id]:this.dataListSelections.map ( item => item.id )
                this.$confirm ( `确定对[id=${ userIds.join ( ',' ) }]进行[${ id?'删除':'批量删除' }]操作?` , '提示' , {
                    confirmButtonText : '确定' ,
                    cancelButtonText : '取消' ,
                    type : 'warning'
                } ).then ( () => {
                    this.$http ( {
                        url : this.$http.adornUrl ( '/qian/user/delete' ) ,
                        method : 'post' ,
                        data : this.$http.adornData ( userIds , false )
                    } ).then ( ( { data } ) => {
                        if ( data && data.code === 200 ) {
                            this.$message ( {
                                message : '操作成功' ,
                                type : 'success' ,
                                duration : 1500 ,
                                onClose : () => this.getDataList ()
                            } )
                        } else {
                            this.$message.error ( data.msg )
                        }
                    } )
                } ).catch ( () => {
                } )
            }
        }
    }
</script>
